<%@ page pageEncoding="utf-8" language="java"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html:html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<html:base/>
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/styles/jquery.datePicker.css" type="text/css"/>
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/js/jquery/css/jquery.multiselect.css" type="text/css" />
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/js/jquery/css/jquery-ui-1.8.16.custom.css" type="text/css" />
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/styles/style1.css" type="text/css" />
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/styles/LoadingBar.css" type="text/css" />	
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/js/jquery/css/jquery.multiselect.filter.css" type="text/css" />
	<title>圖書編輯頁</title>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.validate.min.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/custom.validate.methods.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.metadata.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.multiselect.min.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.multiselect.filter.min.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/LoadingBar.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/date.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.datePicker.js"></script>
	<script type="text/javascript">
	var $album_widget;
	
	$(function() {
	    //try{
		//	window.top.LoadingBar.hide();
		//}catch (e){
		//}
		$("#mainForm").validate({
			meta: "validate",
			messages:{
				'vo.bookname':{
					required:"請輸入圖書名稱",
				}			
			},
			submitHandler: function(form) {				
				if("delete"=='<bean:write property="op" name="lazyForm"/>'){			
					$.ajax({
						url: '<c:out value="${ctx}"/>/ajaxCheckBookItem.do?id=<bean:write property="vo.id" name="lazyForm"/>',
						type: 'POST',				
						dataType: 'json',
						success: function(data, status){							
							if(data){
								if(data.type=="D"){
									alert("此圖書正在被下載，不能被刪除");
								}else if(data.type=="A"){
									var info="";
									var value = data.value;
									if(value && value.length){
										$(value).each(function(i){
											info = value[i]+"\n";
										});
										alert("此圖書已收錄在以下合輯中，不能被刪除:\n" + info);
									}else{
										setButtonDisabled();
										document.mainForm.submit();
									}
								}else{
									var info="";
									var value = data.value;
									if(value && value.length){
										$(value).each(function(i){
											info = value[i]+"\n";
										});
										alert("此圖書已收錄在以下產品中，不能被刪除:\n" + info);
									}else{
										setButtonDisabled();
										document.mainForm.submit();
									}
								}
							}else{
								setButtonDisabled();
								document.mainForm.submit();
							}
						},
						error: function(xhrInstance, status, xhrException) {
							alert("failure:" + status);
						}
					});
				}else{
					setButtonDisabled();
					document.mainForm.submit();					
				}				
			}
		});
						
		// lang Area
		<logic:present name="lazyForm" property="vo.bookLangs" >
		<logic:notEmpty name="lazyForm" property="vo.bookLangs" >
		    $("#tr_langs").show();
		</logic:notEmpty>
		</logic:present>
		
		// categories 
		<logic:present name="lazyForm" property="vo.categories" >
		<logic:notEmpty name="lazyForm" property="vo.categories" >
		<logic:iterate id="category" name="lazyForm" property="vo.categories">
		    var id ='<bean:write name="category" property="id"/>';
		    $("#sel_category option[value="+id+"]").attr("selected",true);            
		</logic:iterate>    
		</logic:notEmpty>
		</logic:present>
		
		//vo.books
		 var id;
		<logic:present name="lazyForm" property="vo.books" >
		<logic:notEmpty name="lazyForm" property="vo.books" >
		<logic:iterate id="book" name="lazyForm" property="vo.books">
		    id='<bean:write name="book" property="id"/>';
		    $("#sel_book option[value="+id+"]").attr("selected",true);            
		</logic:iterate>    
		</logic:notEmpty>
		</logic:present>
		/*checkAllText: 'Check all',
		uncheckAllText: 'Uncheck all',
		noneSelectedText: 'Select options',
		selectedText: '# selected',*/
		var checkAllText = "全選";
		var uncheckAllText="取消";
		var noneSelectedText = "請選擇";
		var selectedText = "已選  #";
		var label ='查找:';
		var placeholder = '請輸入關鍵字';
		var $category  = $("#sel_category").multiselect({
			selectedList: 5,
			checkAllText: checkAllText,
			uncheckAllText:uncheckAllText,
			noneSelectedText:noneSelectedText,
			selectedText: selectedText,
			position: { 
				my: 'center', 
				at: 'center'
			}
		}).multiselectfilter({
			label: label,
			placeholder: placeholder
	    });
		
		$album_widget = $("#sel_book").multiselect({
			selectedList: 5,
			checkAllText: checkAllText,
			uncheckAllText:uncheckAllText,
			noneSelectedText:noneSelectedText,
			selectedText: selectedText,
			position: { 
				my: 'left bottom', 
				at: 'left top'
			}
		}).multiselectfilter({
			label: label,
			placeholder: placeholder
	    }); 
		
		Date.format = 'yyyy/mm/dd';
		$('td input[name$="_date"]').datePicker({startDate:'1996-01-01'});

		freshZipArea();			
		
		bindEvent();
		
		// Area update
		$('td input[name^="vo"]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="data" />');
		$('td select[name^="vo"]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="data" />');
		$('form input[type=select], form input[type=check],form input[type=text],form input[type=file]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="data" />');
		// $('td input[name="vo.id"]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="key" />');
		$('td input[name="vo.id"]').attr('disabled', 'disabled');
		<logic:equal value="delete" name="lazyForm" property="op">
			$category.multiselect('disable');
			$album_widget.multiselect('disable');
		</logic:equal>
		
	});
	
	function bindEvent(){
		<logic:notEqual value="delete" name="lazyForm" property="op">
		$("#chk_langs").click(function(){
			if($("#chk_langs").attr("checked")){
				$("#tr_langs").show();
				$("#tr_langs input").attr("disabled",false);
			}else{
				$("#tr_langs").hide();
				$("#tr_langs input").attr("disabled",true);
			}
		});
		
		$("#album_flag").click(function(){
			<logic:equal value="update" name="lazyForm" property="op">
		    	return false;
			</logic:equal>
			<logic:notEqual value="update" name="lazyForm" property="op">
				freshZipArea();
			</logic:notEqual>
		});
		</logic:notEqual>
		
//		$("#mainForm").submit(function (){
//			window.top.LoadingBar.show();
//		});
		
		
	}
	
	function freshZipArea(){
		if($("#album_flag").attr("checked")){
			$("#tr_zipfile").hide();
			$("#tr_zipfile input").attr("disabled",true);
			$("#tr_album").show();
			$("#tr_album select").attr("disabled",false);
			$album_widget.multiselect('enable');
		}else{
			$("#tr_zipfile").show();
			$("#tr_zipfile input").attr("disabled",false);
			$("#tr_album").hide();
			$("#tr_album select").attr("disabled",true);
			$album_widget.multiselect('disable');
		}
	}
		
	function setButtonDisabled(){
		$("#save, #back").attr("disabled",true);
	}
	</script>
</head>
<body>

	<form id='mainForm' name='mainForm'	action='<c:out value="${ctx}"/>/saveBookItems.do' enctype="multipart/form-data" method="post" >
		<html:hidden property="op" name="lazyForm" />
		<html:hidden property="vo.iconImage" name="lazyForm" />
		<html:hidden property="vo.thumbImage" name="lazyForm" />
		<html:hidden property="vo.zipfile" name="lazyForm" />
		<html:hidden property="vo.zipFileName" name="lazyForm" />
		<html:hidden property="vo.booksize" name="lazyForm" />
		<div id="DataArea">
			<table width="100%" border="0">
				<tr>
					<th class="th" colspan="2"><bean:write property="op" name="lazyForm" /></th>
				</tr>
				<tr>
					<td class="title">ID</td>
					<td class="one"><html:text styleId="id" name="lazyForm"	property="vo.id" size="20" /></td>
				</tr>
				<tr>
					<td class="title">圖書名稱</td>
					<td class="one">
					    <html:text styleClass="{validate:{required:true}}" styleId="bookname" name="lazyForm" property="vo.bookname" size="20" /> 
					   <br/>書名多語系 
					    <input type="checkbox" id="chk_langs" <logic:notEmpty name="lazyForm" property="vo.bookLangs" >checked="checked"</logic:notEmpty> />
					</td>
				</tr>
				<tr id="tr_langs" style="display: none;">
					<td class="title">書名多語系</td>
					<td class="one">
						<ul style="list-style-type: none; margin: 0;">
							<li><label>簡體中文</label>
							<html:text name="lazyForm" property="zh_cn" size="20" disabled="disabled" />
							</li>
							<li><label>繁體中文</label>
							<html:text name="lazyForm" property="zh_tw" size="20" disabled="disabled" />
							</li>
							<li><label>英 文</label>
							<html:text name="lazyForm" property="en" size="20" disabled="disabled" />
							</li>
						</ul></td>
				</tr>
				<tr>
					<td class="title">ICON</td>
					<td class="one">
					    <logic:present name="lazyForm" property="vo.iconImage">
						<img src='<c:out value="${ctx}"/>/showIcon.do?file=<bean:write name="lazyForm" property="vo.iconImage"/>' />
						</logic:present> 
						<html:file styleId="icon" property="icon" name="lazyForm" size="20" />
					</td>
				</tr>
				<tr>
					<td class="title">ICON縮圖</td>
					<td class="one">
					    <logic:present name="lazyForm" property="vo.thumbImage">
						<img src='<c:out value="${ctx}"/>/showThumb.do?file=<bean:write name="lazyForm" property="vo.thumbImage"/>' />
						</logic:present>
                        <html:file styleId="thumb" property="thumb" name="lazyForm" size="20" />
                    </td>
				</tr>
				<tr>
					<td class="title">描述</td>
					<td class="one">
					    <html:text styleId="description" name="lazyForm" property="vo.description" size="20" />
					</td>
				</tr>
				<tr>
					<td class="title">關鍵字</td>
					<td class="one">
					    <html:text styleId="keyword" name="lazyForm" property="vo.keyword" size="50" />
					</td>
				</tr>
				<tr>
					<td class="title">上架日期</td>
					<td class="one">
					    <html:text styleId="release_date" name="lazyForm" property="vo.release_date" size="20" />
					</td>
				</tr>
				<tr>
					<td class="title">圖書分類</td>
					<td class="one">
					    <html:select styleId="sel_category" style="width:400px;" multiple="multiple" property="vo.categories" name="lazyForm" size="5">
							<html:optionsCollection name="lazyForm" label="categoryname" value="id" property="categories" />
						</html:select>
					</td>
				</tr>
				<tr>
					<td class="title">啟動旗標</td>
					<td class="one">
					    <html:select name="lazyForm" property="vo.enable_flag">
							<html:option value="Y">是</html:option>
							<html:option value="N">否</html:option>
						</html:select>
					</td>
				</tr>
				<tr>
					<td class="title">是否為合輯</td>
					<td class="one">
					    <html:checkbox styleId="album_flag" name="lazyForm" property="vo.album_flag" value="Y" />
					</td>
				</tr>
				<tr id="tr_zipfile">
					<td class="title">壓縮檔上傳</td>
					<td class="one" style="padding: 10px;">
					    <logic:present name="lazyForm" property="vo.zipfile">
						<span style="margin-bottom: 10px;"> 已上傳檔案：
						<a href="<c:out value="${ctx}"/>/zipDownload.do?id=<bean:write name="lazyForm"  property="vo.id"/>">
						  <bean:write name="lazyForm" property="vo.zipFileName" />
						</a> &nbsp;&nbsp; 
						<bean:write name="lazyForm" property="vo.booksize" />KB
						</span>
						<br />
						</logic:present>
						<html:file styleId="zipfile" property="zipfile" name="lazyForm" size="20" />
				    </td>
				</tr>
				<tr id="tr_album" >
					<td class="title">選擇圖書</td>
					<td class="one">
					    <html:select styleId="sel_book" style="width:400px;" multiple="multiple" name="lazyForm" property="vo.books" size="5">
							<html:optionsCollection name="lazyForm" label="bookname" value="id" property="books" />
						</html:select>
					</td>
				</tr>
			</table>
		</div>
		<div id="send">
			<input type="submit" name="save" id="save" value=" 儲存" />
			<input type="button" name="back" id="back" value="上一頁" onclick="history.go(-1);" />
		</div>
	</form>
</body>
</html:html>